<template>
  <div class="dashboard-container">
    <h2 class="head-big-title">Tambah Produk</h2>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <div style="width: 92%;margin: 0 4% 30px 4%;background-color: white;text-align: left;padding: 10px 1% 50px 2%;">
      <el-form
        :inline="true"
        :model="newData"
        label-position="top"
        size="medium"
        label-width="110px">
        <el-form-item label="Nama Produk" class="one-hang">
          <el-input v-model="newData.productName" placeholder="Nama"></el-input>
        </el-form-item>
        <el-form-item label="Imej Produk" class="one-hang">
          <div style="display: block;width: 100%;">
            <el-upload
              style="display: block;"
              ref="upload"
              :limit="1"
              action="http"
              accept=".jpg, .png"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :on-exceed="handleExceed"
              :show-file-list="false"
              :file-list="fileList"
              :http-request="uploadFile"
              :auto-upload="false">
              <div v-for="(item,index) in newData.picDate" :key="index" style="width: 75px;height: 75px;position: relative;float: left;margin-left: 15px;">
                <el-image
                  style="width: 75px;height: 75px;margin-right: 15px;"
                  :src="picbase + item.picUrl">
                </el-image>
                <i @click="deletePicDate(item)" class="el-icon-delete" style="font-size: 20px;position: absolute;top: 0;right: 0;width: 24px;height: 24px;background-color: rgba(245,0,3,0.8);text-align: center;line-height: 24px;"></i>
              </div>
              <i slot="trigger" v-if="newData.picDate.length < 3" class="el-icon-plus" style="margin-left: 15px;width: 75px;height: 75px;border: 1px solid #263445;line-height: 75px;text-align: center;font-size: 24px;border-radius: 8px;"></i>
              <div slot="tip" class="el-upload__tip">* Image Dimension 800px x 800px</div>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="Kategori Produk" class="one-hang">
          <el-select v-model="newData.categoryId" placeholder="Kategori">
            <el-option v-for="(item,index) in categoryList" :key="index" :label="item.categoryName" :value="item.categoryId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Penerangan" class="one-hang">
          <el-input v-model="newData.description" type="textarea" placeholder="Penerangan" maxlength="500"></el-input>
        </el-form-item>
        <el-form-item label="Jenama" class="two-hang">
          <el-input v-model="newData.brand" placeholder="Jenama" maxlength="30"></el-input>
        </el-form-item>
        <el-form-item label="Model Produk" class="two-hang">
          <el-input v-model="newData.productModel" maxlength="30"></el-input>
        </el-form-item>
        <h2 class="big-title">Price</h2>
        <el-form-item class="three-hang">
          <p style="line-height: 16px;height: 52px;">Harga Kos Seunit (Owner)</p>
          <el-input v-model="newData.priceCost" placeholder="Harga"  type="number"></el-input>
        </el-form-item>
        <el-form-item class="three-hang">
          <p style="line-height: 16px;height: 52px;">Harga Seunit(Dealer Utama)</p>
          <el-input v-model="newData.priceMasterDealer" placeholder="Harga"  type="number"></el-input>
        </el-form-item>
        <el-form-item class="three-hang">
          <p style="line-height: 16px;height: 52px;">Harga Seunit(Dealer)</p>
          <el-input v-model="newData.priceDealer" placeholder="Harga"  type="number"></el-input>
        </el-form-item>
        <el-form-item label="SKU" class="one-hang">
          <el-input v-model="newData.skuDate.skuDescribe"></el-input>
        </el-form-item>
        <el-form-item label="MOQ" class="one-hang">
          <el-input v-model="newData.skuDate.moq" type="number"></el-input>
        </el-form-item>
        <el-form-item label="Tempoh Penghantaran (Hari)" class="one-hang">
          <el-input v-model="newData.skuDate.deliveryDay" type="number"></el-input>
        </el-form-item>
        <el-form-item label="Berat (kg)" class="one-hang">
          <el-input v-model="newData.skuDate.weight" type="number"></el-input>
        </el-form-item>
        <el-form-item label="bimension (cm)" style="width: 98%;display: inline-block;">
          <el-input v-model="newData.skuDate.length" type="number" placeholder="Panjang" style="width: 30%;margin-right: 4%;"></el-input>
          <el-input v-model="newData.skuDate.width" type="number" placeholder="Lebar" style="width: 30%;margin-right: 4%;"></el-input>
          <el-input v-model="newData.skuDate.height" type="number" placeholder="Tinggi" style="width: 30%;"></el-input>
        </el-form-item>
        <el-form-item label="Unit Jualan" class="one-hang">
          <el-input v-model="newData.skuDate.unit"></el-input>
        </el-form-item>
        <el-form-item label="Ukuran Seunit (UOM)" class="one-hang">
          <el-input v-model="newData.skuDate.masterUnit"></el-input>
        </el-form-item>
        <el-form-item label="Kuantiti Penukaran" class="one-hang">
          <el-input v-model="newData.skuDate.exchangeNum" type="number"></el-input>
        </el-form-item>
        <el-form-item label="Stok" class="one-hang">
          <el-input v-model="newData.skuDate.stock"  type="number"></el-input>
        </el-form-item>
        <el-form-item label="Status" class="one-hang">
          <el-select v-model="newData.state" placeholder="Status">
            <el-option label="Aktif" value="0"></el-option>
            <el-option label="Tak Aktif" value="1"></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-button type="primary" @click="newDataClick" style="float: right;margin-left: 100px;">Simpan</el-button>
          <el-button @click="$router.push({path: '/Products/Query'})" style="float: right;">Balik</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { product_product_newApi, uploadFileApi, uploadFileAddress } from '@/api/user'

export default {
  name: 'CustomersDetails',
  data() {
    return {
      tableData: [],
      categoryList: [],
      imageUrlList: [],
      uploadFileList: [],
      newData: {
        picDate: [],
        skuDate: {}
      },
      upCount: 1,
      upLoadAddress: '',
      orderChart: '',
      unLessWord1: '',
      unLessWord2: '',
      unLessWord3: '',
      imageUrl: '',
      fileData: '',
      fileList: []
    }
  },
  mounted() {
    this.upLoadAddress = uploadFileAddress
    this.categoryList = this.$store.state.user.categoryList
    // this.newData = {
    //   description: '方式方法',
    //   Jenama: '勘探局',
    //   priceCost: '12',
    //   priceDealer: '14',
    //   priceMasterDealer: '13',
    //   productModel: '454',
    //   productName: '飞机2',
    //   skuDate: {
    //     'stock': '45',
    //     'deliveryDay': '5',
    //     'length': '54',
    //     'width': '54',
    //     'skuDescribe': '规格',
    //     'moq': 54,
    //     'height': '54',
    //     'unit': 'cm',
    //     'masterUnit': 'cup',
    //     'exchangeNum': 24,
    //     'weight': '4'
    //   }
    // }
  },
  methods: {
    deletePicDate(item) {
      console.log(this.newData.picDate)
      let index = 404
      if (this.newData.picDate.length && this.newData.picDate.length > 0) {
        for (let i = 0; i < this.newData.picDate.length; i++) {
          if (this.newData.picDate[i].index == item.index) {
            index = i
          }
        }
        if (index !== 404) {
          this.newData.picDate.splice(index, 1)
        }
      }
    },
    uploadFile(file) {
      this.fileData.append('mf', file.file)
    }, // 上传文件
    handleRemove(file, fileList) {
      this.fileList = fileList
    }, // 移除
    handleExceed(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChange(file, fileList) {
      this.imageUrlList.push({
        imageUrl: URL.createObjectURL(file.raw)
      })
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileList = fileList
      this.submitUpload()
    }, // 监控上传文件列表
    submitUpload() {
      if (this.fileList.length === 0) {
        this.$message({
          message: 'Sila pilih',
          type: 'warning'
        })
        return false
      } else {
        const isLt2M = this.fileList.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB')
          this.fileData = new FormData()
          this.fileList = []
          this.$refs.upload.clearFiles()
        } else {
          this.fileData = new FormData()
          this.$refs.upload.submit()
          this.fileData.append('num', 2)
          this.fileData.append('index', 1)
          console.log(this.fileData)
          uploadFileApi(this.fileData).then((response) => {
            this.newData.picDate.push(response.data.picUrl[0])
            this.$refs.upload.clearFiles()
            this.sortOut()
          })
        }
      }
    }, // 上传到服务器
    sortOut() {
      if (this.newData.picDate.length && this.newData.picDate.length > 1) {
        for (let i = 0; i < this.newData.picDate.length; i++) {
          this.newData.picDate[i].index = i + 1
        }
      }
    },
    newDataClick() {
      product_product_newApi(this.newData).then(res => {
        this.$message({
          message: 'success',
          type: 'success'
        })
        localStorage.removeItem('categoryList')
        this.newData = {}
        this.$router.push({ path: '/Products/Query' })
      }).catch(err => {
        console.log(err)
      })
    },
    handleEdit() {
      console.log('Chose handleEdit')
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }
  .two-hang{
    display: inline-block;
    width: 50%;
    margin: 0;
    .el-input{
      width: 96%;
    }
    .el-select{
      width: 96%;
    }
  }
  .three-hang{
    width: 28%;
  }
  .three-hang + .three-hang{
    margin-left: 3%;
  }
</style>
<style scoped>
  /deep/.head-search label{
    line-height: 30px;
  }
  .one-hang{
    display: block;
  }
  .one-hang .el-select{
    width: 100%;
  }

  .big-title{
    text-align: left;
    font-size: 19px;
    margin: 20px 0;
  }
  .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  /deep/.avatar-uploader .el-upload-list {
    width: 188px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: inline;
    margin-right: 25px;
    float: left;
    border: 2px solid #9ca3ad;
    border-radius: 16px;
    overflow: hidden;
  }
  /deep/ .el-upload-list img{
    width: 70px;
    height: 70px;
  }
  /deep/ .el-upload img{
    width: 80px;
    height: 80px;
  }
</style>
